<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
		 crossorigin="anonymous"> -->
		<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
		 crossorigin="anonymous"> -->

		<link rel="stylesheet" type="text/css" href="../static/dist/css/bootstrap.css" />
	</head>
	<style type="text/css">
		body,
		html {
			padding: 0;
			background-color: #FDFDFD;
			height: 100%;
		}

		hr {
			margin: 0;
		}

		.dfjl .container-fluid {
			padding-top: 8px;
			height: 100%;
			width: 95%;
			background-color: #FFFFFF;
			margin-bottom: 15px;
			border-radius: 3px;
			box-shadow: 1px 1px 10px #EFEFEF;
		}

		.dfjl .a_href {
			display: block;
			height: 50px;
			margin: 10px 0 10px 0;
		}

		.dfjl .container-fluid .images {
			width: 50px;
			height: 50px;
			float: left;
			margin-right: 15px;
		}

		.dfjl .images img {
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}

		.dfjl .msg p {
			padding: 0 0 5px;
			margin: 0;
			opacity: 0.8;
		}

		.dfjl .title {
			background-color: #FFFFFF;
			height: 40px;
			border-bottom: #EFEFEF 1px solid;
			padding: 10px 0 10px;
			text-align: center;
			margin-bottom: 15px;
		}

		.dfjl .title .glyphicon-chevron-left {
			margin-right: -15px;
			float: left;
			margin-left: 10px;
		}

		.dfjl .title h4 {
			text-align: center;
			line-height: 0px;
		}

		[v-cloak] {
			display: none;
		}

		.data_show {
			padding: 50px;
			text-align: center;
			font-size: 22px;
			opacity: 0.5;
		}

		.loading,
		.loading2{
			margin: 10px auto;
			display: block;
			opacity: 0.8;
			height: 30px;
			text-align: center;
		}

		.loading {
			animation-name: myfirst;
			animation-duration: 2s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
			/* Safari and Chrome: */
			-webkit-animation-name: myfirst;
			-webkit-animation-duration: 2s;
			-webkit-animation-timing-function: linear;
			-webkit-animation-iteration-count: infinite;
		}

		@keyframes myfirst {
			0% {
				transform: rotate(0);
			}

			100% {
				transform: rotate(-2880deg);
			}
		}

		@-webkit-keyframes myfirst {
			0% {
				transform: rotate(0);
			}

			100% {
				transform: rotate(-2880deg);
			}
		}
	</style>
	<body>
		<div class="dfjl">
			<div class="title">
				<h4>客户列表</h4>
			</div>
			<div v-cloak class="data_show" v-show="my_data.show">
				无数据
			</div>
			<div v-cloak class="container-fluid" v-for="item in index_list.list" v-on:click="a_href(item.userId)">
				<div class="date">到访时间：{{gettime(item.updateTime)}}</div>
				<hr>
				<div class="a_href">
					<div class="images">
						<img :src="item.imgPath" alt="客户头像">
					</div>
					<div class="msg">
						<p>客户姓名:<span> {{item.username}}</span></p>
						<p>客户编号:<span> {{item.userId}}</span></p>
					</div>
				</div>
			</div>
			<img class="loading" src="../static/img/loading.png" v-show="my_data.loading1">
			<div class="loading2" v-show="my_data.loading2"> </div>
		</div>
	</body>
	<script src="../static/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../static/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	<script src="../static/js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var index_app = new Vue({
			el: '.dfjl',
			data: {
				my_data: {
					show: false,
					list_num: {
						page: 1,
						limit: 8
					},
					loading1: false,
					loading2: false
				},
				index_list: {
					"total": 0,
					"list": []
				}
			},
			created() {
				this.my_data.loading1 = true
				this.ajax_(this.my_data.list_num)
				//滚动事件触发
				that = this
				window.onscroll = function() {
					if (that.getScrollTop() + that.getClientHeight() === that.getScrollHeight() && index_app.$data.my_data.loading2 != true && index_app.$data.my_data.loading1 != true) {
						index_app.$data.my_data.loading1 = true
						that.ajax_(that.my_data.list_num)
					}
				};
			},
			mounted() {
			},
			methods: {
				//跳转页面并带参数
				a_href: function(userId) {
					window.location.href = "./customer.html?userId=" + userId + "&state=1"
				},
				//获取列表信息
				ajax_: function(data_) {
					$.ajax({
						type: 'GET',
						url: "/face/wechat/visited",
						data: data_,
						success: function(resp) {
							if (typeof("string") == typeof(resp)) {
								var resp = eval('(' + resp + ')')
							}
							if (resp.code == "302") {
								console.log(resp)
								window.location.href =
									"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5acca64b07361a8c&redirect_uri=http%3A%2F%2Ftest.aimendian.cn%2Fface%2Fgrant&response_type=code&scope=snsapi_base&state=111#wechat_redirect";
							} else if (resp.code == 100 || resp.code == 313) {
								console.log(resp)
								index_app.$data.my_data.show = false
								index_app.$data.my_data.loading1 = true
								if (resp.data.list != 0) { //如果获取的数据不为空
									index_app.$data.my_data.list_num.page += 1
									console.log(index_app.$data.my_data.list_num.page)
									index_app.$data.index_list.total = resp.data.total
									for (var i in resp.data.list) {
										index_app.index_list.list.push(resp.data.list[i]);
									}
									
									setTimeout(function() {
										index_app.$data.my_data.loading1 = false
										if(resp.data.total>0 && resp.data.total <8){
											index_app.$data.my_data.loading2 = true
										}
									}, 500)
								} else {
									console.log("没有更多了")
									if(index_app.$data.my_data.list_num.page<=1){
										index_app.$data.my_data.show = true
									}else{
										$(".loading2").text("没有更多了···")
									}
									index_app.$data.my_data.loading2 = true
									index_app.$data.my_data.loading1 = false
								}
							} else {
								console.log(resp)
							}
						},
						error: function(error) {
							console.log("返回错误:" + error)
						}
					})
				},
				gettime: function(t) {
					var _time = new Date(t);
					var year = _time.getFullYear();
					var month = _time.getMonth() + 1;
					var date = _time.getDate();
					if (date.toString().length < 2 && month.toString().length < 2) {
						return year + "-" + "0" + month + "-" + "0" + date; //这里自己按自己需要的格式拼接
					} else if (date.toString().length < 2) {
						return year + "-" + month + "-" + "0" + date; //这里自己按自己需要的格式拼接
					} else if (month.toString().length < 2) {
						return year + "-" + "0" + month + "-" + date; //这里自己按自己需要的格式拼接
					} else {
						return year + "-" + month + "-" + date; //这里自己按自己需要的格式拼接
					}
				},

				getScrollTop: function() {
					var scrollTop = 0;
					if (document.documentElement && document.documentElement.scrollTop) {
						scrollTop = document.documentElement.scrollTop;
					} else if (document.body) {
						scrollTop = document.body.scrollTop;
					}
					return scrollTop;
				},

				//获取当前可视范围的高度
				getClientHeight: function() {
					var clientHeight = 0;
					if (document.body.clientHeight && document.documentElement.clientHeight) {
						clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
					} else {
						clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
					}
					return clientHeight;
				},

				//获取文档完整的高度
				getScrollHeight: function() {
					return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
				},
			}
		})
	</script>
</html>
